<template>
  <view>
    <base-drawer mode="bottom" :visible="visible" background-color="transparent" mask maskClosable @close="closeDrawer">
      <view class="w-full bg--w111-fff rd-t-40rpx py-32">
        <view class="text-center fs-28 text--w111-333 fw-500">商品参数</view>
        <view class="params-box rd-24rpx bg--w111-fff mt-20" v-if="specs.length">
          <view class="item flex  text-center" v-for="(item,index) in specs">
            <view class="l">{{item.name}}</view>
            <view class="r">{{item.value}}</view>
          </view>
        </view>
        <view class="mx-20 pb-safe">
          <view class="mt-52 h-72 flex-center rd-36px bg-color  text--w111-fff" @click="closeDrawer">我知道了</view>
        </view>
      </view>
    </base-drawer>
  </view>
</template>
<script>
import baseDrawer from '@/components/tui-drawer/tui-drawer.vue';
export default {
  props:{
    visible: {
      type: Boolean,
      default: false,
    },
    specs:{

    }
  },
  components:{
    baseDrawer
  },
  data() {
    return {
      list: [
        {
          name: '99新',
          desc: '几乎全新'
        },
        {
          name: '95新',
          desc: '有轻微使用痕迹'
        },
        {
          name: '9成新',
          desc: '正常使用痕迹'
        },
        {
          name: '8成新',
          desc: '正常使用痕迹，外观有大面积较明显瑕疵'
        },
        {
          name: '7成新',
          desc: '有严重瑕疵'
        }
      ]
    }
  },
  methods:{
    closeDrawer() {
      this.$emit('closeDrawer');
    }
  }
}
</script>
<style lang="scss" scoped>
.params-box{
  padding: 20rpx;
  min-height: 40vh;
  max-height: 50vh;
  overflow-y: auto;
  .item{
    margin-bottom: 4rpx;
    .l{
      flex-basis: 180rpx; /* 初始宽度 */
      flex-shrink: 0; /* 防止缩小 */
      background: #f7f7f7;
      margin-right: 4rpx;
      color: #9b9b9b;
      padding: 30rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .r{
      flex-grow: 1;
      background: #f7f7f7;
      padding: 30rpx 20rpx;
      display: flex;
      align-items: center;
    }
  }
}
</style>
